<template>
	<view class="hotStore">
		<view class="hotStore_header">
			<view class="hotStore_header_left">
				<view class="hotStore_supplierName">{{supplierInfo.supplierName }}</view>
				<view class="rate">综合评分:<uniRate size="18" :readonly="true" :allowHalf="true" v-model="rateNum">
					</uniRate>
				</view>
			</view>
			<image class="line_customer" src="../../static/kefu.png" mode="widthFix"  @click="toOnlineService"></image>
			<!-- <view class="line_customer" @click="toOnlineService">
				联系客服
			</view> -->
		</view>
		<view class="hotStore_slider">
			<swiper indicator-dots autoplay class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in shopQueryAllData.bannerList" :key="index" class="carousel-item"
					>
					<image :src="item.mallH5Img"
						@error="item.mallH5Img = errorImgUrl" />
				</swiper-item>
			</swiper>
		</view>
		<view style="text-align: center;" v-if="shopQueryAllData.img&&shopQueryAllData.img.imgH5">
			<img style="max-width: 100%;" :src="shopQueryAllData.img.imgH5" />
		</view>
		<view class="hotStore_adver">
			<image v-for="(item, index) in shopQueryAllData.advertiseList" :key="index"
				:src="item.mallH5Img" />
		</view>
		 <view class="floorArea" v-if="shopQueryAllData.floorList.length > 0">
		      <view class="floorArea_select">
				  <view class="floorArea_select_left">
				  	<view
				  	  v-for="(item, index) in shopQueryAllData.floorList"
				  	  :key="index"
				  	  @click="curIndex = index"
				  	  :class="{ floorArea_select_item: true, active: index == curIndex }"
				  	>
				  	  {{ item.name }}
				  	</view>
				  </view>

				<text @click="clickAll"" :class="{ all: true, active: 'all' == curIndex }">全部</text>
		      </view>
		      <view class="floorArea_content" v-if="curGoodslist.length>0">
				  <WaterfallsFlow :wfList='curGoodslist' @itemTap="navToFloorItemDetail"
				  	:hasLogin="hasLogin" :showBeforeLogin="isShowPriceUnlogin"  @addCart='addCart'/>
		      <!--  <view
		          class="hotBrandsList_item_right_good"
		          v-for="(item, index) in shopQueryAllData.floorList[curIndex].goodsList"
		          :key="index"
		          style="cursor: pointer"
		        >

		        </view> -->
		      </view>
		    </view>
	</view>
</template>

<script>
	import {
		errorImgUrl
	} from '@/common/utils/config.js';
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow'
	import {
		queryShopSetting,
		querySupplierShopSetting,
		getAssignInfoBySupplier,
		getAllSupplierList,
		queryByCodeList,
	} from '@/api/hotStores/hotStores.js';
	import {getCustomerGroupBySupplierId} from '@/api/user/user.js'

	import { onlineService } from '@/api/index/index.js';
		import uniRate from '../../components/uni-rate/uni-rate.vue'
	import {
		addToCart
	} from '../../api/cart/cart.js'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniRate,
			WaterfallsFlow,
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				errorImgUrl,
				shopQueryAllData: {
					floorList:[]
				},
				//评价服务
				AssignInfoObj: {
					serviceScore: 0,
					qualityScore: 0,
					priceScore: 0,
					logisticsScore: 0,
					shopSettingId: "",
					shopQueryAllData: {
						shopList: [],
						bannerList: [],
						advertiseList: [],
						floorList: [],
					},
				},
				isShowPriceUnlogin:'0',
				supplierInfo: {
					supplierContact: "",
					supplierName: "",
					supplierContactPhone: "",
				},
				rateNum: 0,
				curIndex:0,
				curGoodslist:[]
			}
		},
		mounted() {
			this.loadData()
			this.loadQueryByCodeList()
			this.loadGetAssignInfoBySupplier()
		},
		onLoad(op) {
			this.id = op.id
			uni.setNavigationBarTitle({
				title: '采购商城'
			})
			this.getSupplierCustomerGroup()
		},
		watch:{
				curIndex(val){
if(val!='all') {
						this.curGoodslist = this.shopQueryAllData.floorList[this.curIndex].goodsList
					}
									}
		},
		methods: {
			getSupplierCustomerGroup(id){
				getCustomerGroupBySupplierId({'supplierId': this.id}).then(res=>{
					if(res.code===0){
						this.supplierCustomerGroup = res.data
					}
				})
			},
			toOnlineService(){
				onlineService({ "vendorId": this.supplierCustomerGroup.customerGroupId}).then(res=>{
					if(res.code === 0){
						window.location.href=res.data
					}
				})
			},
			clickAll() {
					this.curIndex = 'all'
					let goods = []
					console.log(this.shopQueryAllData)
					this.shopQueryAllData.floorList.forEach((item,index) => {
						goods.push(...item.goodsList)
					})

					this.curGoodslist = goods
			},
			// 点击楼层商品跳转到详情页
			navToFloorItemDetail(good) {
				const id = good.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			addCart(item) {
			console.log(item)
					let pType;
					let qType;
					if (item.goodsSourceType === 0) {
						pType = '02';
						qType = 1;
					} else {
						pType = '01';
						qType = 2;
					}
					const good = {
						protocolGoodsId: item.goodsId,
						protocolId: item.protocolId,
						protocolType: pType,
						remainAmount: 1
					}
					/* const params = {
						areaId: uni.getStorageSync('areaId'),
						bizDeptId: uni.getStorageSync('bizDeptInfo').deptId,
						goods: [good],
						isqueryAmount: true,
						queryType: qType
					} */
					const params = {
						areaId: uni.getStorageSync('areaId'),
						goodsId: item.goodsId||item.id,
						num: 1
					}
					let userAreaId = uni.getStorageSync('areaId')
					if (userAreaId) {
						params['areaId'] = userAreaId
					} else {
						params['areaId'] = uni.getStorageSync('tenantAreaId')
					}
					addToCart(params).then(res => {
						if (res.code === 0) {
							this.$util.msg('加入购物车成功')
						}else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					} else {
							this.$util.msg(res.message)
						}
					})

			},
			loadData() {
				querySupplierShopSetting({
					id: this.id
				}).then(res => {
					if (res.code == 0) {
						if(res.data.floorList&&res.data.floorList.length>0)
							this.curGoodslist = res.data.floorList[this.curIndex].goodsList
						let bannerList = res.data.imgList.filter(
							(item) => item.imgType == 2
						);
						let shopList = res.data.imgList.filter(
							(item) => item.imgType == 1
						);
						let advertiseList = res.data.imgList.filter(
							(item) => item.imgType == 3
						);
						let smallBannerList = res.data.imgList.filter(
							(item) => item.imgType == 4
						);
						let posterBannerList = res.data.imgList.filter(
							(item) => item.imgType == 5
						);

						res.data.bannerList = bannerList;
						res.data.shopList = shopList;
						res.data.advertiseList = advertiseList;
						let filterBannerList = [];
						let length = smallBannerList.length;
						this.shopVisible = true;
						res.data.posterBannerList = posterBannerList;
						if(res.data.img){
						  const imgH5 = res.data.img.imgH5
						  if(imgH5){
							  try {
							    const temp = JSON.parse(imgH5)
							    if(temp&&temp.length>0) {
									res.data.img.imgH5 = temp[0].fileUrl || ''
							    }
							  }catch (e){

							  }
						  }
						}
						this.shopQueryAllData = res.data;

						console.log(this.shopQueryAllData)

						let num = Math.floor(length / 3);
						if (length == 0) {
							return;
						}
						if (num == 0) {
							filterBannerList.push(smallBannerList);
						} else {
							for (let i = 0; i < num; i++) {
								let arr = data.slice(i * 3, i * 3 + 3);
								filterBannerList.push(arr);
							}
							if (num * 3 < length) {
								let arr = data.slice(num * 3, length);
								filterBannerList.push(arr);
							}
						}
						console.log(res.data.floorList)
						this.shopQueryAllData.smallBannerList = filterBannerList;
					}
				})
			},
			loadQueryByCodeList() {
				queryByCodeList({
					code: this.id
				}).then(response => {
					if (response.code == 0) {
						this.supplierInfo = response.data[0];
					}
				})
			},
			toDecimal(nums) {
				let num = parseFloat(nums);
				if (isNaN(num)) {
					return;
				}
				num = Math.round(nums * 10) / 10;
				if (num.toString().length == 1) {
					num += ".0";
				}
				return num;
			},
			loadGetAssignInfoBySupplier() {
				getAssignInfoBySupplier({
					deptId: this.id
				}).then(response => {
					if (response.code == 0) {
						let obj = response.data;
						let assignTotal = 0;
						let serviceScore = this.AssignInfoObj.serviceScore;
						let qualityScore = this.AssignInfoObj.qualityScore;
						let priceScore = this.AssignInfoObj.priceScore;
						let logisticsScore = this.AssignInfoObj.logisticsScore;
						for (let index in obj) {
							assignTotal += obj[index].reviewList.length;
							for (let j in obj[index].reviewList) {
								serviceScore += Number(obj[index].reviewList[j].serviceScore);
								qualityScore += Number(obj[index].reviewList[j].qualityScore);
								priceScore += Number(obj[index].reviewList[j].priceScore);
								logisticsScore += Number(
									obj[index].reviewList[j].logisticsScore
								);
							}
						}
						if (assignTotal > 0) {
							this.AssignInfoObj.serviceScore = this.toDecimal(
								serviceScore / assignTotal
							);
							this.AssignInfoObj.qualityScore = this.toDecimal(
								qualityScore / assignTotal
							);
							this.AssignInfoObj.priceScore = this.toDecimal(
								priceScore / assignTotal
							);
							this.AssignInfoObj.logisticsScore = this.toDecimal(
								logisticsScore / assignTotal
							);
							this.rateNum =
								(+this.AssignInfoObj.serviceScore +
									+this.AssignInfoObj.qualityScore +
									+this.AssignInfoObj.priceScore +
									+this.AssignInfoObj.logisticsScore) /
								4;
							this.rateNum = this.toDecimal(this.rateNum)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hotStore {
		.hotStore_header {
			height: 100rpx;
			background-color: #e2e2e2;
			padding: 10rpx 30rpx;
			position: relative;
		}

		.hotStore_supplierName {
			font-size: 30rpx;

		}

		.rate {
			display: flex;
		}

		.line_customer {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 24rpx;
			top: 30rpx;
			border-radius: 30upx;
		}

		.hotStore_slider {
			width: 100%;
			height: 600rpx;

			.carousel {
				width: 100%;
				height: 600rpx;
			}

			image {
				width: 100%;
				height: 100%;

			}
		}

		.hotStore_adver {
			image {
				width: 50%;
				height: 300upx;
			}
		}
	}
	.floorArea {
	    padding: 10rpx 20rpx;
		.all {
			&.active {
				color: #c8232c;
			}
		}
	    .floorArea_select {
			.floorArea_select_left {
				width: 90%;
				display: inline-block;
			}
	      .floorArea_select_item {
	        display: inline-block;
	        padding: 0px 12rpx;
	        background: #fff;
	        border: 1px solid #333;
	        border-radius: 40rpx;
	        font-size: 24rpx;
	        margin-right: 20rpx;
	        cursor: pointer;
	        &.active {
	          background: #c8232c;
	          color: #fff;
	          border: 1px solid #c8232c;
	        }
	        &:hover {
	          background: #c8232c;
	          color: #fff;
	          border: 1px solid #c8232c;
	        }
	      }
	    }
	    .floorArea_content {

	    }
	  }
</style>
